<template>
    <div class="btn-slide-wrapper" @touchstart.stop="touchStart" @touchend.stop="touchEnd">
        <div class="con" :class="slide?'slide-left':'slide-right'">
            <slot></slot>
        </div>
        <div class="slide-btn" @click="btnClick()" :style="btnStyle" :class="slide?'slide-left':'slide-right'">
            删除
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            btnWidth: {
                type: Number,
                default: 65
            },
            btnFontStyle: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                slide: false,
                ts: 0,
                te: 0
            }
        },
        computed: {
            btnStyle() {
                return this.btnFontStyle + ";width:" + this.btnWidth + "px"
            }
        },
        methods: {
            btnClick() {
                this.$emit("btnClick");
            },
            touchStart(e) {

                this.ts = e.targetTouches[0].clientX

            },
            touchEnd(e) {

                this.te = e.changedTouches[0].clientX
                if (this.te - this.ts < -this.btnWidth) {
                    this.slide = true
                }
                if (this.te - this.ts > this.btnWidth) {
                    this.slide = false
                }

            }
        }
    }
</script>

<style scoped lang="stylus">
    .slide-left
        transform translateX(-65px)
        transition all .4s

    .slide-right
        transform translateX(0)
        transition all .4s

    .btn-slide-wrapper
        z-index 1
        white-space nowrap
        overflow hidden
        display flex

        .con
            width 100%
            clear both
            flex-shrink 0

        .slide-btn
            flex-shrink 0
            color white
            width 65px
            background-color red
            font-size 12px
            display flex
            align-items center
            justify-content center
</style>